<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业5</title>
</head>

<body>
    <!--3 将模型数据和视图进行绑定-->
    <div id="app">
        <!-- 展示模型数据 -->
        <p>输入的姓 名是:{{user.name}}</p>
        <p>输入的年 龄是{{user.age}}</p>
        <p>选择的性 别是{{user.gender}}</p>
        <p>选择的爱 好是{{user.hobby}}：</p>

        <hr>

        <form action="">
            姓名:<input type="text" v-model="user.name"><br><br>

            年龄:<input type="text" v-model="user.age"><br><br>

            性别:<input type="radio" value="man" v-model="user.gender">男
            <input type="radio" value="woman" v-model="user.gender">女<br><br>

            爱好:<input type="checkbox" value="sing" v-model="user.hobby">唱
            <input type="checkbox" value="dance" v-model="user.hobby">跳
            <input type="checkbox" value="basketball" v-model="user.hobby">篮球<br><br>

            <input type="button" id="btn" value="保存" onclick="submitButton()">
        </form>
    </div>

    <!--1 引入js文件-->
    <script src="../js/vue.js"></script>

    <!--2 定义Vue对象，初始化模型数据-->
    <script>

         function submitButton(){
            alert("提交失败，请检查网络")
         }
        new Vue({
            el: "#app", //定义Vue控制的区域
            data: {
                user: {
                    name: "", //姓名
                    age: "", //年龄
                    gender: "", //性别
                    hobby: [] //由于爱好可能存在多个,使用数组封装          
                }
            }
        });
    </script>

</body>

</html>